<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('操作设备')" />
</head>
<body class="gray-bg">
    <div class="col-sm-12 select-table table-striped">
        <table id="bootstrap-table"></table>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/js/socket.io.js}"></script>
    <script th:inline="javascript">
    $(function() {
        var options = {
            showSearch: false,
            showRefresh: false,
            showColumns: false,
            showToggle: false,
            showPageGo: false,
            pagination: false,
            uniqueId: "id",
            modalName: "",
            columns: [{
                field: 'id',
                title: '设备ID',
                visible: false
            },
            {
                field: 'name',
                title: '设备名称'
            },
            {
                field: 'positionName',
                title: '安装位置'
            },
            {
                field: 'operation',
                title: '操作类型',
                formatter: function () {
                    return [[${describe}]];
                }
            },
            {
                field: 'result',
                title: '操作结果',
                formatter: function(value) {
                    value = $.common.isEmpty(value) ? "请稍后..." : value;
                    return "<span style='color: blue;'>" + value + "</span>"
                }
            }]
        };
        $.table.init(options);
    });

    var socket;
    connect();
    function connect() {
        var opts = {
            query: 'userId=' + [[${@permission.getPrincipalProperty('userId')}]]
        };
        var host = [[${@config.getSocketIOHost()}]];
        var port = [[${@config.getSocketIOPort()}]];
        socket = io.connect('http://' + host + ':' + port, opts);

        socket.on('connect', function () {
            // 写入表格
            if (Object.prototype.toString.call(parent.param) === '[object Array]') {    // 数组
                $.each(parent.param, function (index, obj) {
                    $("#bootstrap-table").bootstrapTable('insertRow', {
                        index: $("#bootstrap-table").bootstrapTable('getData').length,
                        row: {
                            id: obj.id,
                            name: obj.name,
                            positionName: obj.positionName
                        }
                    });
                });
            } else {    // 对象
                $("#bootstrap-table").bootstrapTable('insertRow', {
                    index: 0,
                    row: {
                        id: parent.param.id,
                        name: parent.param.name,
                        positionName: parent.param.positionName
                    }
                });
            }
            // 调用api
            var url = ctx + [[${url}]];
            $.ajax({
                url: url,
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(parent.param),
                success: function(result) {

                }
            });
        });

        socket.on('op_device', function (event) {
            var result = JSON.parse(event.content);
            $("#bootstrap-table").bootstrapTable('updateByUniqueId', {
                id: result.id,
                row: {
                    result: result.result
                }
            });
        });

        socket.on('disconnect', function () {
        });
    }

</script>
</body>
</html>